<template>
  <view class="container">
    <!-- 车型列表 -->
    <view class="car-list">
      <view v-for="(car, index) in carList" :key="index" class="car-item" @click="selectCar(car)">
        <image class="car-image" :src="car.image" alt="车型图片" />
        <view class="car-details">
          <text class="car-model">{{ car.model }}</text>
          <text class="car-plate">{{ car.plate }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 假设车列表是通过某种方式从后台获取到的
const carList = ref([
  {
    image: 'https://example.com/car1.jpg',
    model: '奔驰 C200',
    plate: '沪A12345',
  },
  {
    image: 'https://example.com/car2.jpg',
    model: '宝马 5系',
    plate: '沪B67890',
  },
  {
    image: 'https://example.com/car3.jpg',
    model: '奥迪 A6L',
    plate: '沪C11223',
  },
]);

// 选择车型
const selectCar = (car) => {
  console.log('选择的车型:', car);
  wx.setStorageSync('selectedCar', car); // 存储选中的车型
  uni.navigateBack(); // 返回订单页面
};
</script>

<style scoped>
/* 页面容器 */
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 车型列表 */
.car-list {
  display: flex;
  flex-direction: column;
}

.car-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.car-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border-radius: 8px;
  object-fit: cover;
}

.car-details {
  display: flex;
  flex-direction: column;
}

.car-model {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.car-plate {
  font-size: 14px;
  color: #888;
}
</style>
